<template>
  <div class="tip">
    <!-- 常见科室结构 -->
    <div class="department">
      <div class="header">
        <div class="left">
          <Svg-icon name="keshi" width="18px" height="18px"></Svg-icon>
          <span>&nbsp;常见科室</span>
        </div>
        <div class="right">
          <span>全部&nbsp;</span>
          <el-icon color="#409efc"><ArrowRight /></el-icon>
        </div>
      </div>
      <div class="content">
        <ul>
          <li>神经内科</li>
          <li>呼吸内科</li>
          <li>消化内科</li>
          <li>呼吸内科</li>
          <li>消化内科</li>
          <li>外科</li>
          <li>内科</li>
          <li>妇科</li>
          <li>儿科</li>
          <li>神经外科</li>
          <li>皮肤科</li>
        </ul>
      </div>
    </div>
    <!-- 平台公告 -->
    <div class="notice">
      <div class="header">
        <div class="left">
          <Svg-icon name="notice" width="18px" height="18px" />
          <span>&nbsp;平台公告</span>
        </div>
        <div class="right">
          <span>全部&nbsp;</span>
          <el-icon color="#409efc"><ArrowRight /></el-icon>
        </div>
      </div>
      <div class="content">
        <ul>
          <li>关于延长北京大学国际医院就诊时间的通知</li>
          <li>北京中医院大学东方医院暂停营业</li>
          <li>武警总医院挂号最新通知</li>
          <li>关于延长北京大学国际医院就诊时间的通知</li>
          <li>北京中医院大学东方医院暂停营业</li>
        </ul>
      </div>
    </div>
    <!-- 停诊公告 -->
    <div class="notice">
      <div class="header">
        <div class="left">
          <Svg-icon name="stop" width="18px" height="18px" />
          <span>&nbsp;停诊公告</span>
        </div>
        <div class="right">
          <span>全部&nbsp;</span>
          <el-icon color="#409efc"><ArrowRight /></el-icon>
        </div>
      </div>
      <div class="content">
        <ul class="stop_notice_ul">
          <li>首都国际医院停诊通知</li>
          <li>北京中医药大学房山医院停诊通知</li>
          <li>航天中心医院未来一星期停诊通知</li>
          <li>首都国际医院停诊通知</li>
          <li>北京中医药大学房山医院停诊通知</li>
          <li>航天中心医院未来一星期停诊通知</li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts" name="Tip"></script>

<style scoped lang="scss">
.tip {
  width: 100%;
  margin-top: 50px;
  display: flex;
  flex-direction: column;
  font-size: 16px;
  color: $base-color;
  .department {
    margin-bottom: 10px;
    .header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      .left,
      .right {
        display: flex;
        align-items: center;
        &:hover {
          color: $base-active-color;
          cursor: pointer;
        }
      }
    }
    .content {
      font-size: 15px;
      margin: 20px 0;
      ul {
        display: flex;
        text-align: left;
        flex-wrap: wrap;
        justify-content: space-between;
      }
      li {
        margin-bottom: 15px;
        width: 33%;
        &:hover {
          color: $base-active-color;
          cursor: pointer;
        }
      }
    }
  }
  .notice {
    margin-bottom: 30px;
    .header {
      display: flex;
      justify-content: space-between;
      .left,
      .right {
        display: flex;
        align-items: center;
        &:hover {
          color: $base-active-color;
          cursor: pointer;
        }
      }
    }
    .content {
      font-size: 15px;
      margin: 20px 0;
      ul {
        // 设置列表样式
        list-style-type: disc;
        list-style-position: inside;
        li {
          // 处理文字溢出
          white-space: nowrap; // 文字不换行
          text-overflow: ellipsis; // 文字超出为省略号
          overflow: hidden; // 设置超出部分隐藏
          margin-bottom: 15px;
          &:hover {
            color: $base-active-color;
            cursor: pointer;
          }
          // 设置列表样式的颜色
          &::marker {
            color: $base-active-color;
          }
        }
        &.stop_notice_ul {
          li::marker {
            color: red;
          }
        }
      }
    }
  }
}
</style>
